<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="js/bootstarp-3.3.7/css/bootstrap.min.css" />
	<script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
	<script src="js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
		$(function() {
			$("#tab").bootstrapTable({
				url:"ccgl/ou.lgg",
				pagination:true,
				pageSize:5, 
				queryParams:queryParam,
				columns:[{
					field:'pickout_id',
					title:'拣货单id',
				    align:'center'
				},{
					field:'name',
					title:'仓库',
				    align:'center'
				},{
					field:'status_id',
					title:'运输方式',
				    align:'center'
				},{
					field:'plan_pickout_date',
					title:'计划出库时间',
				    align:'center'
				},{
					field:'create_date',
					title:'创建时间',
					align:'center'
				},{
					field:'update_date',
					title:'更新时间',
					align:'center'
				},{
					field:'done_flag',
					title:'拣货状态',
					align:'center'
				},{
					title:'编辑拣货单',
					field:'pickout_id',
				    align:'center',
				    formatter:function (value,row,index) {
						return"<button class='btn btn-info glyphicon glyphicon-edit' onclick='addmodel("+row.pickout_id+")'></button>"
				    }
				},{
					title:'拣货完成确认',
					field:'pickout_id',
				    align:'center',
				    formatter:function (value,row,index) {
						return"<button class='btn btn-warning glyphicon glyphicon-check'  onclick='addmodel2("+row.pickout_id+")'></button>"
				    }
				}]
			})
			 
		
			
	 		/* $("#tab3").bootstrapTable("destroy"); */
		      $("#tab3").bootstrapTable({
				url:"ccgl/yck.lgg",
				pagination:true,
				pageSize:10, 
				queryParams:{},				
				columns:[{
					field:'prod_id',
					title:'货物编号',
				    align:'center'
				},{
					field:'pname',
					title:'货物名称',
				    align:'center'
				},{
					field:'package_name',
					title:'包装单位',
					align:'center'
				},{
					field:'preout_amt',
					title:'预出库数量',
					align:'center'
				},{
					field:'done_flag',
					title:'出库确认',
					align:'center'
				},{
					title:'删除',
				    align:'center',
				    formatter:function (value,row,index) {
						return"<button class='btn btn-danger' onclick='del("+row.preout_id+","+row.preout_amt+","+row.pickout_prod_id+")'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></button>"
				    }
				}]
			})
	  
			
			
			
			
			
				$.ajax({
					type: "post",
					url: "ccgl/so.lgg",
					success: function(data) {
						for(i = 0; i < data.length; i++) {
							alert(data[i].whId)
							$("#name").append("<option value='" + data[i].whId + "'>" + data[i].name + "</option>")
						}
					}
				});
	
			
			
			$("#btn").click(function(){
			 $("#tab").bootstrapTable('refresh');
		})
   
   
			
			
		})
		
		
		
		 
        
		
		
		
		
		
		function queryParam(){
			return{
			'wh_id':$("#name").val(),
			
			}
			
		}
		
		function num(preout_amt,index) {
			var out_amt2 = $(".number:eq("+index+")").val();
			if(out_amt2 > preout_amt) {
				out_amt2 = preout_amt;
				$(".addBtn:eq("+index+")").attr("disabled", "disabled");
				$(".reduceBtn:eq("+index+")").removeAttr("disabled");
			} else if(out_amt2 < 0) {
				out_amt2 = 0;
				$(".reduceBtn:eq("+index+")").attr("disabled", "disabled");
				$(".addBtn:eq("+index+")").removeAttr("disabled");
			} else {
				$(".addBtn:eq("+index+")").removeAttr("disabled");
				$(".reduceBtn:eq("+index+")").removeAttr("disabled");
			}
		$(".number:eq("+index+")").val(out_amt2);
		}

		function reduce(preout_amt,index) {
			var out_amt2 = $(".number:eq("+index+")").val();
//			alert(out_amt2)
			out_amt2 = parseInt(out_amt2) - 1;
			if(out_amt2 < 0) {
				out_amt2 = 0;
				$(".reduceBtn:eq("+index+")").attr("disabled", "disabled");
			} else if(out_amt2 < preout_amt) {

				$(".addBtn:eq("+index+")").removeAttr("disabled");
			}
			$(".number:eq("+index+")").val(out_amt2);
		}

		function add(preout_amt,index) {
			var out_amt1 = $(".number:eq("+index+")").val();
//			alert($(".number"))
//			 var out_amt1= demo[index];
			out_amt1 = parseInt(out_amt1) + 1;

			if(out_amt1 > preout_amt) {
				out_amt1 = preout_amt;
				$(".addBtn:eq("+index+")").attr("disabled", "disabled");
			} else if(out_amt1 > 0) {

				$(".reduceBtn:eq("+index+")").removeAttr("disabled")
			}
			$(".number:eq("+index+")").val(out_amt1);
//			out_amt1.val(.number:eq("+index+"));
		}

		
		
		
		
		 function addmodel(pickout_id) {
			 $("#myModal").modal('show');
		    	$("#tab2").bootstrapTable("destroy");
			  $("#tab2").bootstrapTable({
				url:"ccgl/mxb.lgg",
				pagination:true,
				queryParams:"pickout_id="+pickout_id,
				pageSize:10, 
				columns:[{
					field:'pid',
					title:'货物编号',
					align:'center'
				},{
					field:'pname',
					title:'货物名称',
					align:'center'
				},{
					field:'packname',
					title:'包装单位',
					align:'center'
				},{
					field:'plan_amt',
					title:'请求出库数量',
					align:'center'
				},{
					field:'preout_amt',
					title:'待预出库数量',
					align:'center'
				},{
					field:'out_amt',
					title:'已预出库数量',
					align:'center'
				},{
					field:'out_amt1',
					title:'预出库数量', 
				    align:'center',
				    formatter:function (value,row,index) {
				    	return '<form class="form-inline"><button type="button"  class="btn btn-danger addBtn glyphicon glyphicon-plus" onclick="add(' + row.preout_amt + ','+index+')" ></button>  <input type="text"  class="form-control number" style="width:60px" onblur="num(' + row.preout_amt + ','+index+')" value="0">  <button type="button" class="btn btn-success glyphicon glyphicon-minus reduceBtn"  onclick="reduce(' + row.preout_amt + ','+index+')" ></button></form>'
				    }
				},{
					title:'确定',
				    clign:'center',
				    field:'pickout_prod_id',
				    formatter:function (value,row,index) {
						return"<button class='btn btn-info' onclick='up("+row.pickout_prod_id+","+index+","+row.preout_amt+","+row.out_amt1+","+row.pickout_id+")'><span class='glyphicon glyphicon-ok' aria-hidden='true'></span></button>"
				    }
				}
				/* ,{
					title:'预定库位',
				    clign:'center',
				    formatter:function (value,row,index) {
						return"<button class='btn btn-warning' data-toggle='modal' data-target='#myModal2' onclick='addmodel3("+row.pickout_prod_id+","+index+")'><span class='glyphicon glyphicon-plus' aria-hidden='true'></span></button>"
				    }
				} */
				]
			})
			  
			  
			  
			  
			
			}
			
			
			
			
			
		 
			
		 function up(pickout_prod_id,index,preout_amt,out_amt1,pickout_id){
		         alert("确定出库数量？")
		 	
		 		
		  if ($(".number:eq("+index+")").val()!=0) { 
		 	$.ajax({
		        	type:"post",
		        	url:"ccgl/upSome.lgg",
		        	data:"pickout_prod_id="+pickout_prod_id+"&preout_amt="+preout_amt+"&out_amt1="+$(".number:eq("+index+")").val()+"&pickout_id="+pickout_id,
		        	success:function (data) {     		
		        		$("#tab2").bootstrapTable("refresh");
		        		$("#tab3").bootstrapTable("refresh");
		        	}
		        });  
		  } else{
		 	alert("预出库数量不能等于0")
		 } 
		  }
			
	function addmodel2(pickout_id){
				 $.ajax({
			 	type:"post",
			 	url:"ccgl/mxb.lgg",
			 	data:"pickout_id="+pickout_id,
//				dataType:"json",
			 	success:function (data) {  
			 		/* alert(data.length); */
			 	if (data.length!=0) {
			 		 alert("拣货未完成");
			 		
			 	}else if (data.length==0){
			 		alert("拣货完成");
			 		$.ajax({
       		         		type:"post",
       		         		url:"ccgl/updat.lgg",
       		         		data:"pickout_id="+pickout_id,
       		         		success:function (data) { 
       		         			$("#tab").bootstrapTable("refresh");
       		         		}
       		         	});
			 	}
			 	
			 	}
				});
				
			}


        function del(preout_id,preout_amt,pickout_prod_id){
	     alert("确定删除此条数据吗?")
	     $.ajax({
       	  type:"post",
       	  url:"ccgl/dele.lgg",
          data:"preout_id="+preout_id+"&preout_amt="+preout_amt+"&pickout_prod_id="+pickout_prod_id,
       	  success:function (data) {
       		$("#tab3").bootstrapTable('refresh');
       		$("#tab2").bootstrapTable('refresh');
       	 }
      });  
 }

		
		</script>
</head>
<body>
 <div class="x-body">
      <div class="layui-row" align="center">
        <form class="form-inline">
          <div class="form-group" align="center">	
           <select name="name" id="name" class="form-control">
       	     <option value="0">请选择</option>
	       </select>
           <button type="button" class="btn btn-default btn-md glyphicon glyphicon-search" id="btn"></button>
          </div>
        </form>
      </div>
      
      
		
    
     <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
     <div class="modal-dialog modal-lg" role="document" style="width:1200px">
     <div class="modal-content">
     	<div class="modal-header">
			<h4>拣货明细表</h4>			
		</div>
     	
     	
            <div class="modal-body">
					<table id="tab2"></table>	
	                  
                    <table id="tab3"></table>
			</div>
			
			<div class="modal-footer ">
						<button type="button" class="btn btn-danger glyphicon glyphicon-remove" data-dismiss="modal"></button>
						<button type="button" class="btn btn-success glyphicon glyphicon-ok" ></button>
					</div>
    </div>
  </div>
</div>
    
    
     
      
      </div>
 <br />
   <table id="tab"></table>
  
  
  
</body>
</html>